<template>
  <div class="turn-container">
    <!-- <el-button @click="elbuttonHandle1()">1</el-button> -->
    <!-- <el-button @click="elbuttonHandle2()">2</el-button> -->
    <div class="turn-banner">
      <div class="turn-content">
        <div id="flipbook">
          <el-image v-for="(item, index) in readList" :key="index" fit="fill" :src="item.docHtmlContent" alt="" srcset="" />
        </div>
      </div>

      <!-- <div class="slider-bar">
        <div v-for="(item, index) in imgList" :key="index" class="slider" :class="{ 'slider-current': index + 1 == currentPage }" @click="toPageHandle(index)"></div>
      </div> -->
      <!-- <div class="block">
        <span class="demonstration">不显示间断点</span>
        <el-slider v-model="value1" :step="10" @change="changeHandle()">
        </el-slider>
      </div> -->
    </div>
  </div>
</template>
<script>
// import { ref, nextTick, onMounted } from "vue";
import turn from "@/utils/turn.js";
import $ from "jquery";
import { mapGetters } from "vuex";
import {
  publicationPage,
  newElectronic,
  readElectronic,
} from "@/api/publicationCenter.js";

export default {
  data() {
    return {
      // value1: 0,
      readList: [],
      imgList: [
        {
          url: require("@/assets/images/dp9.png"),
          id: 1,
        },
        {
          url: require("@/assets/images/dp9.png"),
          id: 10,
        },
      ],
      currentPage: 10,
      toPage: 1,
      total: 0,
      periodicalId: 0,
      puBlicationId: 0,
    };
  },
  methods: {
    onTurn() {
            // this.firstHandle();
        $("#flipbook").turn({
          autoCenter: true,
          height: 740, //高度
          width: 1200, //宽度
          display: "double", //单页显示/双页显示  single/double
          elevation: 50,
          duration: 500, //翻页速度(毫秒), 默认600ms
          gradients: true, //翻页时的阴影渐变, 默认true
          autoCenter: true, //自动居中, 默认false
          acceleration: true, //硬件加速, 默认true, 如果是触摸设备设置为true
          page: 1, //设置当前显示第几页
          pages:  this.readList.length, //总页数
          when: {
            //监听事件
            turning: function (e, page, view) {
              // 翻页前触发
              console.log(e, page, view);
              // console.log("点击了");
            },
            turned: function (e, page) {
              console.log(e)
              this.currentPage = page;
              // 翻页后触发
            },
          },
        });

      $('.flipbook').turn("peel", "tr");
    },
    turning() {
      console.log("下一页");
    },
    turned() {
      console.log("下一页");
    },
    changeHandle(e) {
      console.log(e);
    },
    firstHandle() {
      let params = {};
      // params.publicationId =   this.$route.query.publicationId
      // params.periodicalId = this.$route.query.periodicalId
      // params.page = this.toPage
      params.publicationId = 28;
      params.periodicalId = 48;
      params.page = this.toPage;
      readElectronic(params).then((res) => {
        console.log(res, "res");
        this.readList = res.data;
        // this.readList.push([])
        this.total = res.total;
        console.log(this.readList, "this.readList");
      });
    },
  },
  mounted() {
    // this.periodicalId = this.$route.query.periodicalId
    // this.puBlicationId = this.$route.query.publicationId
    //  console.log(this.periodicalId,this.puBlicationId)
    let that = this

    setTimeout(() => {
      that.onTurn();
    }, 1000);
  },
  created() {
       this.firstHandle();
       this.onTurn()
    //  console.log(this.periodicalId,this.puBlicationId)
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
.turn-banner {
  width: 100vw;
  height: 100vh;
  background: #fff;
  .turn-content {
    display: flex;
    margin: 0px auto;
    overflow: hidden;
    #flipbook {
      margin: auto !important;
      margin-top: 60px !important;
      background: pink;
      .el-image {
        width: 600px;
        height: 740px;
      }
    }
  }
}
.slider-bar {
  width: 900px;
  height: 8px;
  border-radius: 5px;
  background-color: #ccc;
  margin-top: 15px;
  display: flex;
  overflow: hidden;
  .slider {
    flex: 1;
    cursor: pointer;
  }
  .slider-current {
    background-color: #666;
    border-radius: 5px;
  }
}
</style>

